<template>
  <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="height: 100vh;"
      default-active="/Index"
      :collapse="isCollapse"
      :collapse-transition="false"
      router>

    <el-menu-item index="/Index">
      <i class="el-icon-s-fold"></i>
      <span slot="title">首页</span>
    </el-menu-item>

    <el-menu-item :index="'/'+item.menuclick" v-for="(item,i) in menu" :key="i">
      <i :class="item.menuicon"></i>
      <span slot="title">{{ item.menuname }}</span>
    </el-menu-item>

  </el-menu>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      user: ''
    }
  },
  created() {
    this.getMenu()
  },
  props: {
    isCollapse: {
      type: Boolean,
    }
  },
  computed: {
    'menu': {
      get() {
        return this.$store.state.menu
      }
    }
  },
  methods: {
    getMenu() {
      this.user = JSON.parse(localStorage.getItem('user'))
      this.$axios.get(this.$http + '/wms/menu/getMenuListById/' + this.user.roleId).then(response => {
        if (response.data.code === 200) {
          this.$store.commit("setMenu", response.data.data)
        } else {
          this.$message({
            message: response.data.message,
            type: "error",
            duration: 3 * 1000
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
